<template>
  <div class="iframe-container" ref="container">
    <iframe ref="iframe" :src="src" frameborder="0" allowfullscreen></iframe>
  </div>
</template>

<script>
export default {
  name: 'IframeComponent',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  mounted() {
    const iframe = this.$refs.iframe
    iframe.onload = () => {
      const height = iframe.contentWindow.document.body.scrollHeight + 'px'
      iframe.style.height = height
      this.$refs.container.style.height = height
    }
  }
}
</script>

<style scoped>
.iframe-container {
  overflow: hidden;
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
}
</style>
